<template>
    <div class="bg">
        <img src="../images/bg.jpg" id="bg">
    </div>
    <drawer id="drawer_right">
        <group style="width: 300px;height: 720px;background: white;" id="content">
            <button value="按钮"></button>
        </group>
    </drawer>

    <drawer slide-from="left" id="drawer_left">
        <group style="width: 300px;height: 720px;background: white;" id="content">
            <button value="按钮"></button>
        </group>
    </drawer>

    <drawer slide-from="bottom" id="drawer_bottom">
        <group style="width: 1280px;height: 200px;background: white;" id="content">
            <button value="按钮"></button>
        </group>
    </drawer>

    <drawer slide-from="top" id="drawer_top">
        <group style="width: 1280px;height: 200px;background: white;" id="content">
            <button value="按钮"></button>
        </group>
    </drawer>

    <drawer id="drawer_custom_shadow">
        <div style="background: white;opacity: 0.3;" id="shadow"></div>
        <group style="width: 200px;height: 720px;background: white;" id="content">
            <button value="按钮"></button>
        </group>
    </drawer>

    <drawer id="drawer_no_shadow">
        <div id="shadow"></div>
        <group style="width: 200px;height: 720px;background: white;" id="content">
            <button value="按钮"></button>
        </group>
    </drawer>

    <group style="width: 1280px;height: 720px;overflow: hidden;" view-locate="center" first-focus>
        <div class="title" style="left: 40px;top: 40px;">Drawer</div>
        <div class="view_bg" style="top: 80px;"></div>
        <group class="group_view" style="top: 80px;" view-locate="center" first-focus>
            <div class="second_title">从上显示</div>
            <button style="top: 60px;" value="显示" id="fromTop"></button>

            <div class="second_title" style="left: 250px;">从下显示</div>
            <button style="top: 60px;left: 250px;" value="显示" id="fromBottom"></button>

            <div class="second_title" style="left: 500px;">从右显示</div>
            <button style="top: 60px;left: 500px;" value="显示" id="fromRight"></button>

            <div class="second_title" style="left: 750px;">从左显示</div>
            <button style="top: 60px;left: 750px;" value="显示" id="fromLeft"></button>
        </group>

        <div class="title" style="left: 40px;top: 320px;">设置阴影</div>
        <div class="view_bg" style="top: 360px;"></div>
        <group class="group_view" style="top: 360px;" view-locate="center">
            <div class="second_title">定制阴影</div>
            <button style="top: 60px;" value="显示" id="custom_shadow"></button>

            <div class="second_title" style="left: 250px;">无阴影</div>
            <button style="top: 60px;left: 250px;" value="显示" id="no_shadow"></button>

        </group>

    </group>
</template>